/* eslint-disable react/prop-types */
import { ColProps, Form } from "antd"
import TextArea from "antd/es/input/TextArea"

import { useLocale } from "@/locales"

interface ICustomTextArea {
	name: string
	label: string
	placeholder: string
	width?: string
	labelCol?: ColProps | undefined
	disableRules?: boolean
	messageRule?: string
	minRows?: number
	messageRequired?: string
	value?: string
	ref?: string
}

export const CustomTextArea: React.FC<ICustomTextArea> = ({
	name,
	label,
	placeholder,
	width,
	labelCol,
	disableRules,
	messageRule,
	messageRequired,
	minRows,
	value,
	ref
}) => {
	const { formatMessage } = useLocale()
	return (
		<Form.Item
			labelCol={labelCol}
			style={{ width: width }}
			name={name}
			label={label}
			rules={
				disableRules
					? undefined
					: [
							{
								required: true,
								message: formatMessage({ id: messageRequired ? messageRequired : "member.label_desc_content" })
							},
							{
								min: 2,
								max: 500,
								message: formatMessage({ id: messageRule ? messageRule : "common.validate.length_min_max" }, { min: 2, max: 500 })
							}
					  ]
			}
		>
			<TextArea
				allowClear
				count={{
					show: true,
					max: 500
				}}
				defaultValue={value}
				autoSize={{ minRows: minRows ? minRows : 2 }}
				placeholder={placeholder}
				ref={ref}
			/>
		</Form.Item>
	)
}
